<!DOCTYPE html>
<html>
<head>
    <title>电子书列表</title>
    <link rel="stylesheet" href="${request.contextPath}/resources/layui/css/layui.css">
</head>
<body>
<div style="margin-left: 10px;margin-top: 10px">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">书名</label>
                <div class="layui-input-inline" style="width: 150px">
                    <input type="text" class="layui-input" id="eName" placeholder="书名" autocomplete="off">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">作者</label>
                <div class="layui-input-inline" style="width: 150px">
                    <input type="text" class="layui-input" id="author" placeholder="作者" autocomplete="off">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">电子书类型</label>
                <div class="layui-input-inline" style="width: 150px">
                    <select id="type">
                        <option value="">类型</option>
                        <option value="1">教育</option>
                        <option value="2">科技</option>
                        <option value="3">文学</option>
                        <option value="4">小说</option>
                        <option value="5">其他</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">电子书状态</label>
                <div class="layui-input-inline" style="width: 150px">
                    <select id="status">
                        <option value="">电子书状态</option>
                        <option value="0">未入库</option>
                        <option value="1">已入库</option>
                        <option value="2">已删除</option>
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn" id="searchBtn">查询</button>

            </div>
        </div>
    </form>
    <hr>
    <table id="dataTable" lay-filter="dataTableFilter"></table>
</div>
<script type="text/html" id="editTpl">
    <form class="layui-form layui-form-pane" enctype="multipart/form-data" action="uploadFile" style="margin-top: 15px;margin-left: 15px" lay-filter="editFormFilter">
        <div class="layui-form-item">
            <label class="layui-form-label">
                书名
            </label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="eName" placeholder="书名" lay-verify="required" lay-reqText="书名不能为空" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电子书类型</label>
            <div class="layui-input-inline">
                <select name="type" lay-verify="required" lay-reqText="电子书类型不能为空">--%>
                    <option value="">电子书类型</option>
                    <option value="1">教育</option>
                    <option value="2">科技</option>
                    <option value="3">文学</option>
                    <option value="4">小说</option>
                    <option value="5">其他</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">作者</label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" name="author" placeholder="作者" lay-verify="required" lay-reqText="作者不能为空" />
            </div>
        </div>
        <div class="layui-form-item layui-form-text" style="width: 300px">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="descp" placeholder="描述"></textarea>
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-form-item">
                    <input type="file" id="file" name="file" src="${request.contextPath}/resources/book/ming.txt""  lay-verify="required" lay-reqText="文件不能为空">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-form-item">
                <input type="hidden" id="url" name="url" >
            </div>
        </div>
        <button id="subBtn" type="button" lay-filter="subBtnFilter" lay-submit style="display: none"></button>
    </form>
</script>

<script type="text/html" id="headerBtns">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" type="button" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>添加
        </button>
    </div>
</script>

<script type="text/html" id="rowBtns">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" type="button" lay-event="update">
            <i class="layui-icon layui-icon-edit"></i>修改
        </button>
        <button class="layui-btn layui-btn-sm" type="button" lay-event="down">
            <i class="layui-icon layui-icon-down"></i>下载
        </button>
        <shiro:hasPermission name="ebook:check">
        <button class="layui-btn layui-btn-sm layui-btn-warm" type="button" lay-event="check">
            <i class="layui-icon layui-icon-add-1"></i>入库
        </button>
        </shiro:hasPermission>
    </div>
</script>

<script src="${request.contextPath}/resources/layui/layui.js"></script>
<script>
    layui.use(['form', 'table', 'jquery', 'layer', 'upload'], function () {
        let cxt = "${request.contextPath}";
        let form = layui.form;
        let table = layui.table;
        let $ = layui.jquery;
        let layer = layui.layer;
        let upload = layui.upload;

        let tabOpt = {
            elem: "#dataTable",
            id: "dataTableId",
            url: cxt + "/ebook/page.do",
            toolbar: "#headerBtns",
            cols: [[
                {field:'eId', title:'ID', width:100,hide:true},
                {field: 'ename', title: "电子书名称"},
                {field: "type", title: "电子书类型",templet: function (d) {
                        let type = d.type;
                        if (type == 1) {
                            return "教育";
                        } else if (type == 2) {
                            return "科学";
                        }else if (type == 3) {
                            return "文学";
                        }else if (type == 4) {
                            return "小说";
                        }else if (type == 5) {
                            return "其他";
                        }
                    }},
                {field: "author", title: "作者"},
                {
                    field: "status", title: "状态", templet: function (d) {
                        let status = d.status;
                        if (status == 0) {
                            return "未入库";
                        } else if(status == 1) {
                            return "已入库";
                        } else if (status == 2) {
                            return "已删除";
                        }
                    }
                },
                {field: "descp", title: "描述"},
                {field: "createTime", title: "创建时间"},
                {title: "操作",toolbar:"#rowBtns",minWidth:190,fixed:"right"}
            ]],
            page: true,
            parseData: function (rs) {
                if (rs.code == 200) {
                    return {
                        code: rs.code,
                        msg: rs.msg,
                        count: rs.data.total,
                        data: rs.data.records
                    }
                }
            },
            response: {
                statusCode: 200
            }
        };
        //渲染数据表格
        let tabIns = table.render(tabOpt);
        //搜索
        $("#searchBtn").click(function () {
            let eName = $("#eName").val();
            let author = $("#author").val();
            let type = $("#type").val()
            let status = $("#status").val();
            tabIns.reload({
                where: {
                    eName:eName,
                    author:author,
                    type:type,
                    status:status
                }
            })
        });
        //头工具栏事件
        table.on("toolbar(dataTableFilter)", function (d) {
            let event = d.event;
            if (event == "add") {
                //调用具体的add
                add();
            }
        })

        //新增电子书
        function add(){
            let layerOpt = {
                title:"编辑",
                type:1,
                content:$("#editTpl").html(),
                area:['400px','520px'],
                btn:['确认','取消'],
                btnAlign:'c',
                anim:4,
                success:function (layero,index){
                    //渲染表单
                    form.render();
                    //绑定上传事件

                    upload.render({
                        elem:"#upload",
                        url:cxt+"/ebook/upload.do",
                        field:"file",//文件上传的 域值
                        done:function (rs,index,upload){//文件上传完成的回调
                            if(rs.code != 200){
                                layer.msg(rs.msg);
                                return false;
                            }
                            let  data = rs.data;
                            let url = cxt +"/"+data;//文件网络路径
                            // $("#uploadImg").attr("src",imgUrl);// 显示车辆图片
                            //给input赋值
                            $("#url").val(data);
                        }
                    });
                    //设置表单提交监听事件
                    form.on("submit(subBtnFilter)",function (d){
                        let formData = d.field;
                        //进行ajax提交
                        $.post(cxt+"/ebook/add.do",formData,function (rs){
                            layer.msg(rs.msg);
                            if(rs.code != 200){
                                return false;
                            }
                            //刷新表格
                            $("#searchBtn").click();
                            //关闭弹层
                            layer.close(index);
                        });
                        return false;//阻止默认提交行为
                    });
                },
                yes:function (index,layero){
                    $("#subBtn").click();
                }
            };
            layer.open(layerOpt);
        }

        let layerOpt = {
            title: "编辑",
            type: 1,
            content: $("#editTpl").html(),
            area: ['330px', '560px'],
            btn: ['确认', '取消'],
            btnAlign: 'c',
            anim: 4,
            success: function (layero, index) {
                //渲染表单
                form.render();
                //为图片绑定上传事件
                upload.render({
                    elem:"#file",
                    url:cxt+"/ebook/upload.do",
                    accept: 'file',
                    multiple: true,
                    auto: false,
                    acceptMime: 'text/plain',   // 此处是重点
                    exts: 'txt',
                    done:function (rs,index,upload){//文件上传完成的回调
                        if(rs.code != 200){
                            layer.msg(rs.msg);
                            return false;
                        }
                        let  data = rs.data;
                        let url = cxt +"/"+data;//图片的网络路径
                       // $("#url").attr("src",url);// 显示车辆图片
                        //给input赋值
                        $("#url").val(data);
                    }
                });
                // 设置表单提交监听事件
                form.on("submit(subBtnFilter)", function (d) {
                    let formData = d.field;
                    //进行ajax提交
                    $.post(cxt + "/ebook/add.do", formData, function (rs) {
                        layer.msg(rs.msg);
                        if (rs.code != 200) {
                            return false;
                        }
                        //刷新表格
                        $("#searchBtn").click();
                        //关闭弹层
                        layer.close(index);
                    });
                    return false;//阻止默认提交行为
                });
            },
            yes: function (index, layero) {
                $("#subBtn").click();
            }
        };

        /**
         * 调用具体的add
         */
        // function add() {
        //     layer.open(layerOpt);
        // }

        //行工具栏事件
        table.on("tool(dataTableFilter)", function (d) {
            let event = d.event;
            let rowData = d.data;
            if (event == "update") {
                //调用具体的重置请求
                update(rowData);
            } else if (event == "down"){
                downLoad(rowData);
            } else if (event == "check"){
                //检查入库
                check(rowData);
            }

        })

        /**
         * 修改客户数据
         * @param rowData
         */
        function update(rowData) {
            let eidtOpt = {};
            Object.assign(eidtOpt, layerOpt);
            eidtOpt.success = function (layero, index) {
                //渲染表单
                form.render();
                //数据填充
                form.val("editFormFilter", rowData);
                //设置表单提交监听事件
                form.on("submit(subBtnFilter)", function (d) {
                    let formData = d.field;
                    formData.id = rowData.id;
                    //进行ajax提交
                    $.post(cxt + "/ebook/update.do", formData, function (rs) {
                        layer.msg(rs.msg);
                        if (rs.code != 200) {
                            return false;
                        }
                        //刷新表格
                        $("#searchBtn").click();
                        //关闭弹层
                        layer.close(index);
                    });

                    return false;//阻止默认提交行为
                });
            };
            layer.open(eidtOpt);
        }

        /**
         * 检查入库
         * @param rowData  行数据
         */
        function check(rowData){
            console.log(rowData.eid)
            layer.confirm("确定要入库吗?",function (index){
                $.get(cxt+"/ebook/check.do?eId="+rowData.eid,function (rs){
                    layer.msg(rs.msg);
                    layer.close(index);//关闭弹出层
                    $("#searchBtn").click();
                })
            })
        }


        $("#exportBtn").click(function () {
            let ename = $("#ename").val();
            let type = $("#type").val();
            let author = $("#author").val();
            //根据这三个参数 获取数据
            //将数据做成Excel文件 下载下来
            location.href = cxt + "/ebook/export.do?ename=" + ename + "&type=" + type + "&author=" + author;
        });
        //渲染导入组件
        upload.render({
            elem: "#importBtn",
            url: cxt + "/ebook/import.do",
            field: "ebook",//文件域名称
            accept: "file",//允许上传的文件类型
            exts: "xlsx",//允许上传的文件后缀
            size: 1024 * 10,//10M
            done: function (rs, index, upload) {
                layer.msg(rs.msg);
                if (rs.code == 200) {//上传完成 刷新表格
                    $("#searchBtn").click();
                }
            }
        });

    })
</script>
</body>
</html>
